<template>
	<!-- <navbar title="我的"></navbar> -->

	<view class="navbar_s">我的</view>
	<view class="wrap" :style="{ minHeight: tools.clientHeight() }">
		<view class="header" @click="infoClick">
			<view class="left flex-direction-column">
				<image mode="aspectFill" :src="info.userInfo ? info.userInfo.avatar : '/static/image/11.png'"></image>
				<text>{{ info.userInfo ? info.userInfo.nick_name : '请登录' }}</text>
			</view>
		</view>
		<view class="application">
			<view class="application_header flex-space-between">
				<view class="application_header_text">我的报名</view>
				<view class="allApplication" @click="itemClick(0)">
					<view class="text">
						全部订单
					</view>
					<image src="/static/icon/03.png"></image>
				</view>
			</view>
			<view class="flex-space-around">
				<view class="item flex-direction-column" v-for="(item, index) in menu" :key="index"
					@click="itemClick(index+1)">
					<image class="icon" :src="item.icon"></image>
					<view class="text_i"> {{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="mine_serve">
			<view class="mine_serve_header">
				<view class="mine_serve_header_text">我的服务</view>
			</view>
			<view class="flex" style="margin-left: 35rpx;flex-wrap: wrap;">
				<view class="item flex-direction-column" @click="itemClickH('/pagesB/order/myOrder')">
					<image class="icon" src="/static/image/train.png"></image>
					<view class="text_i">我的订单</view>
				</view>
				<view class="item flex-direction-column" style="margin-left: 80rpx;" @click="itemClickH('/pagesB/mine/mineTrain/train')">
					<image class="icon" src="/static/image/train.png"></image>
					<view class="text_i">我的培训</view>
				</view>
				<view class="item flex-direction-column" style="margin-left: 80rpx;"
					@click="itemClickH('/pagesB/mine/mineStudent/index')">
					<image class="icon" src="/static/image/student.png"></image>
					<view class="text_i">我的课程</view>
				</view>
				<view class="item flex-direction-column" style="margin-left: 80rpx;"
					@click="itemClickH('/pagesB/order/address')">
					<image class="icon" src="/static/image/address.png"></image>
					<view class="text_i">我的地址</view>
				</view>
				<view class="item flex-direction-column" 
					@click="itemClickH('/pagesA/mine/help')">
					<image class="icon" src="/static/image/bangzhu.png"></image>
					<view class="text_i">帮助文档</view>
				</view>
				<view class="item flex-direction-column" style="margin-left: 80rpx;" @click="itemClickH('/pagesA/mine/relate')">
					<image class="icon" src="/static/image/women.png"></image>
					<view class="text_i">关于我们</view>
				</view>
			</view>
		</view>
	</view>
	<tabbar :current="3"></tabbar>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { getInfo } from '@/service/api/user'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import tools from '@/utils/tools'
	import tabbar from '@/common/tabbar/index.vue'
	import userPinia from '@/store/user'
	const user = userPinia()

	let info = reactive({
		userInfo: null
	})

	const menu = ref([
		{
			icon: '/static/image/daizhifu.png',
			name: '待支付'
		},
		{
			icon: '/static/image/daicanyu.png',
			name: '待参与'
		},
		{
			icon: '/static/image/yiwancheng.png',
			name: '已完成'
		},
		{
			icon: '/static/image/yituikuan.png',
			name: '已退款'
		}
	])
	const infoClick = () => {
		if (!tools.getStorage('token')) return tools.navTo('/pagesA/mine/login')
		tools.navTo('/pagesA/mine/info')
	}

	// 菜单列表
	const itemClick = (index : number) => {
		if (!tools.getStorage('token')) return tools.navTo('/pagesA/mine/login')
		// tools.navTo(item.page)
		tools.navTo('/pagesA/match/list?id=' + index)
	}

	// 菜单列表
	const itemClickH = (item : any, state = 1) => {
		if (!tools.getStorage('token')) return tools.navTo('/pagesA/mine/login')
		if (!state) {
			tools.navTo(item, 1);
			return
		}
		tools.navTo(item)
	}
	// 获取个人信息
	const getInfoApi = async () => {
		const { code, msg } = await getInfo()

		if (code == 1) {
			tools.setStorage<string>('userInfo', JSON.stringify(msg)), (user.$state.userInfo = JSON.stringify(msg)), (info.userInfo = msg)
			if (user.$state.userInfo && JSON.parse(user.$state.userInfo).power_num > 0) {
				if (menu.value.length != 4) {
					menu.value.push({
						icon: '/static/image/13.png',
						page: '/pagesA/mine/tickets',
						name: '核销验票'
					})
				}
			} else {
				if (menu.value.length == 5) menu.value.splice(4, 1)
			}
		}
	}
	onShow(() => {
		if (tools.getStorage('token')) getInfoApi()
	})

	onLoad(() => {
		info.userInfo = user.$state.userInfo ? JSON.parse(user.$state.userInfo) : null
	})
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		background: rgba(244, 244, 248);
	}

	.navbar_s {
		text-align: center;
		height: 172rpx;
		padding-top: 104rpx;
		background: #354678;
		color: white;
		font-size: 36rpx;
	}

	.header {
		width: 100%;
		padding: 24rpx 40rpx 56rpx 40rpx;
		background: linear-gradient(180deg, #354678 0%, #5062A7 100%);

		.left {
			align-items: center;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 4rpx solid white;
			}

			text {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 20rpx;
				line-height: 50rpx;
				color: #FFFFFF;
			}
		}

		.right {
			width: 40rpx;
			height: 44rpx;
			position: relative;

			text {
				top: 0;
				right: -20rpx;
				color: #fff;
				width: 38rpx;
				height: 28rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				text-align: center;
				position: absolute;
				border-radius: 16rpx;
				background: rgba(230, 66, 94);
			}
		}
	}

	.item {
		margin-top: 20rpx;
		background-color: #fff;
		padding-bottom: 32rpx;
		align-items: center;

		.icon {
			width: 64rpx;
			height: 64rpx;
		}

		text_i {
			width: 128rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.arrow {
			width: 12rpx;
			height: 20rpx;
		}
	}

	.zc {
		width: 100%;
		bottom: 44rpx;
		color: #bbbbbb;
		font-size: 24rpx;
		text-align: center;
		position: absolute;
	}

	.info_c {
		font-size: 20rpx;
		position: absolute;
		top: -5rpx;
		right: -23rpx;
		padding: 3rpx;
		background: rgba(230, 66, 94, 1);
		opacity: 1;
		border-radius: 16rpx;
		color: #ffffff;
	}

	.application {
		background-color: white;

		.application_header {
			align-items: center;
			padding: 30rpx;

			.application_header_text {
				width: 276rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 44rpx;
				color: #000000;
				opacity: 1;
			}

			.allApplication {
				display: flex;

				.text {
					width: 116rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 24rpx;
					color: #666666;
					opacity: 1;
				}

				image {
					height: 23rpx;
					width: 12rpx;
				}
			}
		}
	}

	.mine_serve {
		margin-top: 18rpx;
		background-color: white;

		.mine_serve_header {
			align-items: center;
			padding: 30rpx;

			.mine_serve_header_text {
				width: 276rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 44rpx;
				color: #000000;
				opacity: 1;
			}
		}
	}
</style>